<template>
  <div class="enhanced-list">
    <!-- 渲染处理后的插槽内容 -->
    <component v-for="(node, index) in processedNodes" :key="index" :is="() => node" />
  </div>
</template>

<script setup lang="ts">
import { useSlots, h, VNode } from 'vue'

// 定义组件接收的属性类型
interface Props {
  // 需要过滤的禁用项ID列表
  disabledIds: number[]
}

// 接收父组件传递的参数并指定类型
const props = defineProps<Props>()

// 获取插槽内容并指定类型
const slots = useSlots()

// 处理后的节点数组（虚拟DOM节点类型）
const processedNodes: VNode[] = []

// 检查是否有默认插槽
if (slots.default) {
  // 获取原始插槽内容（虚拟DOM节点数组）并指定类型
  const originalNodes: VNode[] = slots.default()

  // 遍历处理每个节点
  originalNodes.forEach((node, index) => {
    console.log(node.children, index)

    // 1. 过滤禁用项（检查节点key是否在禁用列表中）
    // 注意：节点的key可能是string类型，需要转换为number比较
    if (typeof node.key === 'string' && props.disabledIds.includes(Number(node.key))) {
      return // 跳过禁用项
    }
    if (typeof node.key === 'number' && props.disabledIds.includes(node.key)) {
      return // 跳过禁用项
    }

    // 确保 children 是数组类型后再进行 map 操作
    if (Array.isArray(node.children)) {
      node.children = node.children.map((child) => {
        if (child && typeof child === 'object' && 'type' in child) {
          // 确保 child.props 存在
          child.props = child.props || {}

          // 合并样式
          const existingStyle = child.props.style || {}
          child.props.style = {
            ...existingStyle,
            margin: '8px 0',
            padding: '8px'
          }

          return child
        }
        return child
      })
    }

    // 2. 为每个节点添加额外样式
    // 创建一个包装容器，添加统一样式
    const wrappedNode: VNode = h(
      'div',
      {
        class: ['list-item', index % 2 === 0 ? 'even-item' : 'odd-item'],
        style: { margin: '8px 0', padding: '8px' }
      },
      [node] // 包裹原始节点
    )

    processedNodes.push(wrappedNode)
  })
}
</script>

<style scoped>
.list-item {
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 偶数行特殊样式 */
.even-item {
  background-color: #f5f7fa;
}

/* 奇数行特殊样式 */
.odd-item {
  background-color: #fff;
}
</style>
